<template>
  <div class="driver-detail-page">
    <!-- 固定头部 -->
    <div class="page-header-fixed">
      <div class="header-left">
        <a class="back-link" @click="handleBack">
          <ArrowLeftOutlined />
          <span>返回司机列表</span>
        </a>
        <div class="title-area">
          <h2>司机详情</h2>
          <div class="driver-no">工号：{{ driver?.driverNo }}</div>
        </div>
      </div>
      
      <a-space v-if="driver">
        <a-tag :color="getDriverStatusColor(driver.driverStatus)" class="status-tag">
          {{ getDriverStatusLabel(driver.driverStatus) }}
        </a-tag>
        <a-button @click="handleEdit" v-permission="'driver:edit'">
          编辑
        </a-button>
        <a-popconfirm
          title="确定删除该司机吗？"
          @confirm="handleDelete"
          v-permission="'driver:delete'"
        >
          <a-button danger>删除</a-button>
        </a-popconfirm>
      </a-space>
    </div>
    
    <!-- 可滚动内容区 -->
    <div class="page-content">
      <a-spin :spinning="loading">
        <a-row :gutter="24">
          <!-- 基本信息 -->
          <a-col :span="12">
            <a-card title="基本信息" :bordered="false">
              <a-descriptions :column="1" bordered>
                <a-descriptions-item label="工号">
                  {{ driver?.driverNo }}
                </a-descriptions-item>
                <a-descriptions-item label="姓名">
                  {{ driver?.name }}
                </a-descriptions-item>
                <a-descriptions-item label="性别">
                  {{ driver?.gender === 1 ? '男' : driver?.gender === 2 ? '女' : '-' }}
                </a-descriptions-item>
                <a-descriptions-item label="联系电话">
                  {{ driver?.phone }}
                </a-descriptions-item>
                <a-descriptions-item label="身份证号">
                  {{ driver?.idCard }}
                </a-descriptions-item>
                <a-descriptions-item label="入职日期">
                  {{ formatDate(driver?.entryDate) }}
                </a-descriptions-item>
                <a-descriptions-item label="当前状态">
                  <a-tag :color="getDriverStatusColor(driver?.driverStatus)">
                    {{ getDriverStatusLabel(driver?.driverStatus) }}
                  </a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>

          <!-- 驾驶证信息 -->
          <a-col :span="12">
            <a-card title="驾驶证信息" :bordered="false">
              <a-descriptions :column="1" bordered>
                <a-descriptions-item label="驾驶证类型">
                  <a-tag color="blue">{{ driver?.licenseType }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="驾驶证号">
                  {{ driver?.licenseNo }}
                </a-descriptions-item>
                <a-descriptions-item label="到期日期">
                  <span :class="getExpireClass(driver?.licenseExpireDate)">
                    {{ formatDate(driver?.licenseExpireDate) }}
                  </span>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>

            <a-card title="紧急联系人" :bordered="false" style="margin-top: 16px;">
              <a-descriptions :column="1" bordered>
                <a-descriptions-item label="联系人">
                  {{ driver?.emergencyContact || '-' }}
                </a-descriptions-item>
                <a-descriptions-item label="联系电话">
                  {{ driver?.emergencyPhone || '-' }}
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>
        </a-row>

        <!-- 备注信息 -->
        <a-card title="备注信息" :bordered="false" style="margin-top: 24px;">
          <div class="remark-content">
            {{ driver?.remark || '无' }}
          </div>
        </a-card>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import type { Driver } from '@/types/driver'
import { getDriverById, deleteDriver } from '@/api/tenant/driver'
import { useDictionary } from '@/composables/useDictionary'
import dayjs from 'dayjs'

const router = useRouter()
const route = useRoute()
const driverId = Number(route.params.id)

const loading = ref(false)
const driver = ref<Driver | null>(null)

// 使用字典
const { dictionaries: driverStatusDict, loadDictionaries: loadDriverStatus } = useDictionary('DRIVER_STATUS')

onMounted(async () => {
  await loadDriverStatus()
  await fetchDriver()
})

// 获取司机详情
const fetchDriver = async () => {
  loading.value = true
  try {
    const res = await getDriverById(driverId)
    driver.value = res.data as any
  } catch (error: any) {
    message.error(error.message || '获取司机详情失败')
    router.back()
  } finally {
    loading.value = false
  }
}

// 获取司机状态标签
const getDriverStatusLabel = (status: string | undefined): string => {
  if (!status) return '-'
  const dict = driverStatusDict.value.find(d => d.dictCode === status)
  return dict?.dictLabel || status
}

// 获取司机状态颜色
const getDriverStatusColor = (status: string | undefined): string => {
  const colorMap: Record<string, string> = {
    'IDLE': 'success',
    'BUSY': 'processing',
    'VACATION': 'warning',
    'RESIGNED': 'default',
  }
  return colorMap[status || ''] || 'default'
}

// 格式化日期
const formatDate = (date: string | undefined): string => {
  if (!date) return '-'
  return dayjs(date).format('YYYY-MM-DD')
}

// 获取过期状态样式
const getExpireClass = (expireDate: string | undefined): string => {
  if (!expireDate) return ''
  const days = dayjs(expireDate).diff(dayjs(), 'day')
  if (days < 0) return 'expired'
  if (days < 30) return 'expiring-soon'
  return ''
}

// 返回
const handleBack = () => {
  router.push('/tenant/driver')
}

// 编辑
const handleEdit = () => {
  router.push(`/tenant/driver/edit/${driverId}`)
}

// 删除
const handleDelete = async () => {
  try {
    await deleteDriver(driverId)
    message.success('删除成功')
    router.push('/tenant/driver')
  } catch (error: any) {
    message.error(error.message || '删除失败')
  }
}

</script>

<style scoped>
.driver-detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 固定头部 */
.page-header-fixed {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  background: #fff;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 返回链接样式 */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: fit-content;
}

.back-link:hover {
  color: var(--primary-color);
  gap: 8px;
}

.back-link span {
  text-decoration: none;
  transition: all var(--transition-fast);
}

.back-link:hover span {
  text-decoration: underline;
}

.title-area h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.driver-no {
  font-size: 13px;
  color: var(--text-secondary);
}

.status-tag {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: var(--radius-md);
}

/* 可滚动内容区 */
.page-content {
  flex: 1;
  overflow: auto;
  padding: 0 16px 16px;
}

:deep(.ant-card) {
  box-shadow: var(--shadow-sm);
}

:deep(.ant-descriptions-bordered .ant-descriptions-item-label) {
  background: #fafafa;
  font-weight: 500;
  width: 140px;
}

.plate-number {
  font-weight: 600;
  color: var(--primary-color);
}

.remark-content {
  line-height: 1.8;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.expired {
  color: #ef4444;
  font-weight: 500;
}

.expiring-soon {
  color: #f59e0b;
  font-weight: 500;
}
</style>

